<script setup name="ExampleCurd">
import {dictEditTree, dictAddTree, dictDel} from "@/api/sys/dict";
import {getCurrentInstance, reactive} from "vue";

const {proxy} = getCurrentInstance();

let pd = reactive({
  open: false,
  title: "",
  operation: 0,
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
    mobile: null
  },
  rules: {
    enableFlag: [{
      required: true,
      message: "是否不能为空",
      trigger: "change"
    }],
    name: [{
      required: true,
      message: "名称不能为空",
      trigger: "blur"
    }],
    parentId: [{
      required: true,
      message: "上级编码不能为空",
      trigger: "blur"
    }],
    sort: [{
      required: true,
      message: "排序不能为空",
      trigger: "blur"
    }]
  }
});
/** 提交按钮 */
function submitForm() {
  proxy.$refs["dictRef"].validate(valid => {
    if (valid) {
      if (pd.operation == 1) {
        dictAddTree(pd.form).then(res => {
          proxy.$modal.msgSuccess("新增成功");
          pd.open = false;
          emit("ok", pd.operation);
        });
      } else if (pd.operation == 2) {
        dictEditTree(pd.form).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          pd.open = false;
          emit("ok", pd.operation);
        });
      }
    }
  });
}

// 新增
function add(dict) {
  reset();
  //合并
  pd.form = {...pd.form, ...dict};
  pd.title = "新增样例代码";
  pd.operation = 1;
  pd.open = true;
}

// update
function edit(dict) {
  reset();
  //合并
  pd.form = {...pd.form, ...dict};
  pd.title = "修改样例代码";
  pd.operation = 2;
  pd.open = true;
}

// del
function del(id) {
  pd.operation = 3;
  proxy.$modal.confirm('是否确认删除样例代码编号为:"' + id + '"的数据项？').then(function () {
    return dictDel(id);
  }).then(() => {
    proxy.$modal.msgSuccess("删除成功");
    pd.open = false;
    emit("ok", pd.operation);
  }).catch(() => {
  });
}

// 表单重置
function reset() {
  pd.form = {
    id: null,
    name: null,
    sex: null,
    state: "0",
    enableFlag: "0",
    remark: null
  };
  pd.operation = 0;
  pd.title = "";
  proxy.resetForm("dictRef");
}

defineExpose({add, edit, del});
const emit = defineEmits(["ok"]);

</script>

<template>
  <!-- 添加或修改样例代码对话框 -->
  <el-dialog :title="pd.title" v-model="pd.open" width="700px" append-to-body>
    <el-form ref="dictRef" :model="pd.form" :rules="pd.rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="pd.form.name" placeholder="请输入名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参数" prop="params">
            <el-input v-model="pd.form.params" placeholder="请输入参数"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="pd.form.sort" type="number" placeholder="请输入名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="启用" prop="enableFlag">
            <el-switch v-model="pd.form.enableFlag" active-value="0" inactive-value="1"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="上级编码" prop="parentId">
            <el-input disabled v-model="pd.form.parentId" placeholder="上级id"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="pd.form.remark" type="textarea" placeholder="请输入内容"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="pd.operation===1" type="primary" @click="submitForm">新 增</el-button>
        <el-button v-if="pd.operation===2" type="success" @click="submitForm">修 改</el-button>
        <el-button v-if="pd.operation===2" type="danger" @click="del(pd.form.id)">删 除</el-button>
        <el-button type="info" @click="pd.open = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang='scss' scoped>

</style>